<template>
	<view class="cd-goods-content">
		<view class="cd-goods-item" v-for="item in goodsList" :key="item.id">
			<image :src="item.list_pic_url" mode="widthFix" class="cd-goods-item-img"></image>
			<view class="cd-goods-item-text">{{ item.name }}</view>
			<view class="cd-goods-item-money">{{ item.retail_price | PriceFormats }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cd-categoryList',
	props: {
		goodsList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="less">
.cd-goods-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 480rpx;
	gap: 15rpx;
	.cd-goods-item {
		text-align: center;
		.cd-goods-item-text {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			width: 100%;
			display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
			-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
			-webkit-line-clamp: 1; //一个块元素显示的文本的行数
			overflow: hidden; //溢出隐藏
		}
		.cd-goods-item-money {
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			color: #8b0000;
		}

		.cd-goods-item-img {
			width: 100%;
		}
	}
}
</style>
